<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>05style</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <span :style="str">你好啊!</span>
        
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                // arr是包含样式对象的数组
                // arr:[
                //     {
                //         color:'red',
                //         fontSize:'30px', 
                //     },
                //     {
                //         background:'blue'
                //     }
           
                //  ],
                // obj是样式对象
                // obj:{
                //     color:'yellow',
                //     fontSize:'30px',
                //     background:'green'
                // },
                    str:'color:pink; fontSize:30px'
                    
                    
            }
           
        })
    </script>
</body>

</html>